<template>
        <div class="mui-numbox" data-numbox-min='0' :data-numbox-max="max" >
            <!-- "-"按钮，点击可减小当前数值 -->
            <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
            <input class="mui-numbox-input" type="number" :value='count' @change="countChanged" ref="num" readonly />
            <!-- "+"按钮，点击可增大当前数值 -->
            <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>  
</template>
<script>
import mui from '../lib/mui-master/examples/hello-mui/js/mui.js'
export default {
    data(){
        return {}
    },
    methods:{
        countChanged(){
            // 每当数量值发生改变，立即把最新的数量同步到购物车的store中，覆盖之前的数量值
            this.$store.commit('updateGoodsInfo',{
                id:this.goodsid,
                count:this.$refs.num.value
            });
        }
    },
    mounted(){
        mui(".mui-numbox").numbox();
    },
    props:['max','count','goodsid'],
    watch:{
        // 监听属性：
        max:function(newval, oldval){
            // 当父组件获取到库存量前，传给此子组件的max为undefined；当父组件获取到库存量后，传给max为数值，watch监听到max改变，立刻调用函数将input标签设置了最大值。
            mui('.mui-numbox').numbox().setOption('max',max);
        }
    }
}
</script>
<style lang="scss">

</style>


